<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑页面</title>
    <script src="/mvc/js/vue.min.js"></script>
    <script src="/mvc/js/axios.min.js"></script>
</head>
<body>

<h1>编辑页面</h1>

<div id="app">
    <form>
        姓名:<input type="text" v-model="stu.name"> <br>
        年龄:<input type="text" v-model="stu.age"> <br>
        分数:<input type="text"   v-model="stu.score"> <br>
        描述:<input type="text" v-model="stu.info"> <br>
        <input type="button" @click="updateStu" value="修改操作">
    </form>
</div>
<script>

    let app = new Vue({
        el:"#app",
        data:{
            stu:{}
        },

        methods:{
            updateStu(){
                console.log(this.stu);
                axios({
                    type:"GET",
                    url:"http://localhost:8080/mvc/updateStu",
                    params:this.stu
                }).then(resp=>{
                    console.log(resp);
                    console.log(resp.data);
                    if (resp.data.code == 100000){
                        alert(resp.data.msg);
                        //页面跳转
                        location.href = "stus.html";
                    }
                })
            },
            // 通过id查询数据(对应的stu)
            findStuById(id){
                axios({
                    type:"GET",
                    url:"http://localhost:8080/mvc/findStuById",
                    params: {
                        id:id
                    }
                }).then(resp=>{
                    console.log(resp);
                    console.log(resp.data);
                    console.log(resp.data.data);
                    this.stu = resp.data.data
                })
            }
        },
        created(){

            let id = localStorage.getItem("id");
            this.findStuById(id);
        }
    })

</script>

</body>
</html>